<template>
  <div class="app-container">
    <!-- 搜索输入框 -->
    <div class="filter-container tw-filter">
      <el-form ref="dataForm" :rules="rules" :model="form" label-position="left" label-width="100px" style="width: 400px; margin-left:50px;">
        <el-form-item label="旧密码" prop="old_password">
        <el-input show-password v-model="form.old_password" placeholder="请输入旧密码" class="filter-item tw-filter-input"/>
      </el-form-item>
      <el-form-item label="新密码" prop="password">
        <el-input show-password v-model="form.password" placeholder="请输入新密码" class="filter-item tw-filter-input"/>
      </el-form-item>
      <el-form-item label="确认密码" prop="repassword">
        <el-input show-password v-model="form.repassword" placeholder="请输入确认密码" style="display:flex" class="filter-item tw-filter-input"/>
      </el-form-item>
      </el-form>
    </div>
    <div slot="footer">
      <el-button style="margin-left: 150px;" v-waves class="filter-item tw-filter-button" @click="updateData()">保存</el-button>
    </div>

  </div>
</template>

<script>
  import waves from '@/directive/waves' // waves directive
  import * as commonCur from '@/api/common/current-admin';

  export default {
    directives: { waves },
    data() {
      return {
        // 表单数据
        form: {
          old_password: '', //旧密码
          password: '', //新密码
          repassword: ''  //确认密码
        },
        // 重置数据
        formReset: {
          old_password: '', //旧密码
          password: '', //新密码
          repassword: ''  //确认密码
        },
        // 验证
        rules: {
          old_password: [{ required: true, message: '请输入旧密码', trigger: 'change' }],
          password: [{ required: true, message: '请输入新密码', trigger: 'change' }],
          repassword: [{ required: true, message: '请输入确认密码', trigger: 'blur' }]
        }
      }
    },
    methods: {
      // 保存-修改密码
      updateData() {
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            commonCur.editAdminPassword(this.form).then(response => {
              this.resetForm();
              this.$message({
                message: '修改成功',
                type: 'success'
              })
            })
          }
        })
      },
      // 重置form
      resetForm() {
        this.form = JSON.parse(JSON.stringify(this.formReset))
      }
    }
  }
</script>
